<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta name="referrer" content="no-referrer" />
    <!-- icon图标 -->
    <link rel="icon" href="./static/image/kkb.png">
    <!-- swiper插件 -->
    <link rel="stylesheet" href="./static/swiper/swiper-bundle.min.css">
    <script src="./static/swiper/swiper-bundle.min.js"></script>
    <!-- 全局样式 -->
    <link rel="stylesheet" href="./static/style.css">
    <!-- 弹性布局 -->
    <script src="./static/flexable.js"></script>
    <!-- Vue3.0 -->
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
    <div id="app">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="v in videos" @click="doublePlay(v.id,$event)">
                    <!-- 播放按钮 -->
                    <img v-show="!v.playing" class="play-btn" src="./static/image/play.png" alt="">
                    <!-- 头像 -->
                    <img :src="v.author" class="author" alt="" srcset="">
                    <!-- 获取点赞 -->
                    <div class="reward-num">
                        <img src="./static/image/active.png" alt="" srcset="">
                        <p>{{ v.likenum }}</p>
                    </div>
                    
                    <!-- 点赞出现的心 -->
                    <div class="hearts">
                        <img v-for="h in hearts" :key="h.id" :style="{left:h.x+'px',top:h.y+'px'}"
                            src="./static/image/active.png" alt="">
                    </div>
                    
                    <!-- 播放的视频 -->
                    <video :id="'v-'+v.id" x5-video-player-fullscreen="true" webkit-playsinline="true"
                        x-webkit-airplay="true" playsinline="true" x5-playsinline :src="v.videoUrl"
                        :poster="v.poster"></video>
                </div>
            </div>
        </div>
        <!-- 底部导航栏 -->
        <footer>
            <ul>
                <li>首页</li>
                <li>朋友</li>
                <li><img src="./static/image/kkb.png" alt=""></li>
                <li>消息</li>
                <li>我</li>
            </ul>
        </footer>
    </div>
    <!-- 获取数据 -->
    <script src="./static/data.js"></script>
    <script>
      // 获取屏幕左侧宽度
      const screenW = document.querySelector('.swiper-container').offsetLeft
      const app = {
        data() {
          return {
            videos: VIDEOS,
            lastIndex: 0,
            currentIndex: 0,
            db_start: 0,
            timer: null,
            hearts: []
          }
        },
        mounted() {
          let _self = this
            // 初始化swiper
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'vertical', //垂直切换
                on: {
                    slideChangeTransitionEnd: function () {
                        _self.lastIndex = _self.currentIndex
                        _self.currentIndex = this.activeIndex
                        _self.switch() // 判断上一个暂停， 当前播放
                    }
                }
            })
        },

        methods: {
          switch() {
            document.querySelector("#v-"+this.lastIndex).pause()
            document.querySelector("#v-"+this.currentIndex).play()
            // 修改播放状态
            this.videos.forEach(v => {
              if(v.id === this.lastIndex) {
                v.playing = false
              }else if(v.id === this.currentIndex) {
                v.playing = true
              }
            })
          },

          // 显示小心心
          likes(id, e) {
            let x = e.clientX - screenW - 40
            let y = e.clientY - 40
            this.hearts.push({
              x: x, 
              y: y, 
              id: new Date().getTime()
            })
            if(this.hearts.length > 5) { // 最多加5个心心
              this.hearts.shift()
            }
            this.videos.forEach( v=> {
              if(v.id === id) {
                v.likenum++
              }
            })
          },

          // 单击播放/暂停视频
          clickPlay(id) {
            this.videos.forEach(v => {
              if(v.id === id) {
                if(!v.playing) {
                  v.playing = true
                  document.querySelector("#v-"+id).play()
                }else{
                  v.playing = false
                  document.querySelector("#v-"+id).pause()
                }
              }
            })
          },

          // 判断单击还是双击
          doublePlay(id, e) {
            clearTimeout(this.timer) // 使用定时器前要记得reset定时器
            this.timer = setTimeout(()=>{
              clearTimeout(this.timer)
              this.clickPlay(id)
              this.db_start = 0
            }, 300)
            console.log("单击timer:"+this.timer)
            if(this.db_start === 0) {
              this.db_start = new Date().getTime()
            }else{
              let now = new Date().getTime()
              let delay = now - this.db_start
              if(delay <= 300) {// 点击间隔在300ms内，认为是双击
                console.log("双击："+this.timer)
                while(this.timer > 0) {
                  clearTimeout(this.timer--)
                }
                console.log("关定时器后："+this.timer)
                this.likes(id, e)
              }
              this.db_start = 0
            }

          }
        },
      }
      Vue.createApp(app).mount("#app")

    </script>
  </body>
</html>